<template>
  <div class="more-prod">
    <div class="title">{{ tagList[1].title }}</div>
    <div class="prod-show">
      <dl class="show-item" v-for="(item, index) in moreList" :key="index" @click="ToProd(item.prodId)">
        <dt class="more-prod-pic">
          <img :src="item.pic" alt="" class="more-pic" />
        </dt>
        <dd class="prod-text-right">
          <div class="prod-text more">{{ item.prodName }}</div>
          <div class="prod-info">{{ item.brief }}</div>
          <div class="b-cart">
            <div class="price">
              <span class="symbol">￥</span>
              <span class="big-num">{{
                item.price.toString().split(".")[0]
              }}</span>
              <span class="small-num">{{
                item.price.toString().split(".")[1]
                  ? "." + item.price.toString().split(".")[1]
                  : ".00"
              }}</span>
            </div>
            <img
              src="../../static/images/tabbar/basket-sel.png"
              alt=""
              class="basket-img"
            />
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["tagList"],
  computed: {
    ...mapState({
      moreList: (state) => state.home.moreList,
    }),
  },
  methods: {
    ...mapActions({
      homeMoreList: "home/homeMoreList",
    }),
    ToProd(id) {
      // console.log(id);
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`
      })
    }
  },
  mounted() {
    this.homeMoreList({ tagId: 3, size: 6 });
  },
};
</script>

<style scoped>
.title {
  position: relative;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 32rpx;
  padding: 40rpx 0 10rpx 30rpx;
  color: #333;
  background: #fff;
}
.more-prod .prod-show .show-item {
  position: relative;
  display: flex;
  padding: 20rpx;
  border-top: 2rpx solid #f4f4f4;
}
.more-prod .prod-show .show-item .more-prod-pic {
  width: 250rpx;
  height: 250rpx;
}
.more-prod .prod-show .show-item .more-prod-pic .more-pic {
  max-width: 100%;
  max-height: 100%;
}
.more-prod .prod-show .show-item .prod-text-right {
  margin-left: 30rpx;
  width: 72%;
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.more-prod .prod-show .show-item .prod-text-right .prod-text.more {
  margin: 0;
  font-size: 28rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  display: -webkit-box;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod-items .hot-text .prod-info,
.more-prod .prod-text-right .prod-info {
  font-size: 22rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-cart {
  margin-top: 30rpx;
}
.b-cart .basket-img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 46rpx;
  padding: 8rpx;
}
.more-prod .prod-show .show-item .more-prod-pic .more-pic {
  max-width: 100%;
  max-height: 100%;
}
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
</style>